<template>
  <Header title="详情" />
  <div class="lineLossAnalysis">
    <div class="lineLossAnalysis_header">
      <div class="selectBox">
        <el-select
          v-model="passNo"
          placeholder="请选择通道"
          style="width: 100%"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :clear="false"
          />
        </el-select>
      </div>
    </div>
    <div class="lineLossAnalysis_header_date">
      <van-button type="default" @click="showDialog('start')">{{
        startDate
      }}</van-button>
      <span style="margin: 0 10px">至</span>
      <van-button type="default" @click="showDialog('end')">{{
        endDate
      }}</van-button>
      <van-button type="primary" @click="reset" style="margin-left: 20px"
        >重置</van-button
      >
      <van-button type="primary" @click="getData" style="margin-left: 20px"
        >查询</van-button
      >
    </div>
    <div class="contentBox">
      <div
        v-if="hasData"
        class="chartBox"
        id="chartId"
        ref="myChart"
        style="width: 100%; height: 400px; background: #061740"
      ></div>
      <div
        v-if="!hasData"
        style="
          width: 100%;
          height: 100%;
          background: #061740;
          color: #fff;
          line-height: 400px;
          text-align: center;
        "
      >
        暂无数据
      </div>
    </div>
  </div>
  <van-dialog
    v-model:show="show"
    title="选择日期"
    :show-cancel-button="false"
    :showConfirmButton="false"
  >
    <van-date-picker
      @confirm="confirmDate"
      @cancel="cancelDate"
      v-model="currentDate"
    />
  </van-dialog>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { initChart } from "./CreateNewChart"
import {
  getLineChart,
  getLineChartQueryTime,
  getLineChartOfDevice
} from "@/api"
import { useManageExperiment } from "@/hooks/useManageExperiment"
import moment from "moment"
import Header from "@/components/Header.vue"
import { ElMessage } from "element-plus"

const { experimentData } = useManageExperiment()

// const minDate = ref(new Date(2020, 0, 1))
// const maxDate = ref(new Date(2025, 5, 1))
const startDate = ref("")
const endDate = ref("")
const show = ref(false)
const dateType = ref("start")
const currentDate = ref([])
const showDialog = (type) => {
  const date = new Date()
  const year = String(date.getFullYear())
  const month = String(
    date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1
  )
  const day = String(date.getDate())
  if (type === "end") {
    currentDate.value = [year, month, day]
    // currentDate.value = endDate.value.split("-")
  } else {
    currentDate.value = [year, month, day]
  }
  console.log(currentDate.value, startDate.value)

  dateType.value = type
  show.value = true
}
const confirmDate = ({ selectedValues }) => {
  const dateStr =
    selectedValues[0] + "-" + selectedValues[1] + "-" + selectedValues[2]
  if (dateType.value === "start") {
    if (endDate.value) {
      const startNum = moment(dateStr).valueOf()
      const endNum = moment(endDate.value).valueOf()
      if (startNum > endNum) {
        ElMessage.error("开始日期不能大于结束日期")
      } else {
        startDate.value = dateStr
      }
    } else {
      startDate.value = dateStr
    }
  } else {
    if (startDate.value) {
      const startNum = moment(startDate.value).valueOf()
      const endNum = moment(dateStr).valueOf()
      if (startNum > endNum) {
        ElMessage.error("结束日期不能小于开始日期")
      } else {
        endDate.value = dateStr
      }
    } else {
      endDate.value = dateStr
    }
  }
  show.value = false
}

const cancelDate = () => {
  show.value = false
}
const reset = () => {
  startDate.value = ""
  endDate.value = ""
  passNo.value = "0"
}
const myChart = ref(null)
const resizeFn = ref(null)

const data = ref(null)
const passNo = ref("0")
const options = [
  {
    value: "0",
    label: "全部通道"
  },
  {
    value: "1",
    label: "通道1"
  },
  {
    value: "2",
    label: "通道2"
  },
  {
    value: "3",
    label: "通道3"
  }
]

const panelChange = () => {
  console.log("333")
  //禁止软键盘的弹出
  document.activeElement.blur()
}

const deviceCodeList = ref([])
const deviceNo = ref("")
onMounted(() => {
  // if (experimentData.value) {
  //   const { deviceNoList } = experimentData.value
  //   deviceNo.value = deviceNoList[0]
  //   deviceCodeList.value =
  //     deviceNoList &&
  //     deviceNoList.map((i, index) => {
  //       return {
  //         value: i,
  //         label: `设备${index + 1}`
  //       }
  //     })
  // }

  // const time = moment(new Date()).format("YYYY-MM-DD")
  // startDate.value = time
  // endDate.value = time
  getData()
  // getTime()
})

const getTime = async () => {
  // const res = await getLineChartQueryTime(experimentData.value.testNo)
  // if (res.code === 200) {
  //   startDate.value = res.rows.startDate
  //   endDate.value = res.rows.endDate
  //   getData()
  // }
}
const hasData = ref(false)
const xData = ref([])
const data1 = ref([])
const data2 = ref([])
const getData = async () => {
  const pramsData = {
    deviceNo: experimentData.value.deviceNo,
    passNo: passNo.value,
    startDate:
      startDate.value.length > 12
        ? startDate.value
        : startDate.value
        ? `${startDate.value} 00:00:00`
        : "",
    endDate:
      endDate.value.length > 12
        ? endDate.value
        : endDate.value
        ? `${endDate.value} 00:00:00`
        : ""
  }
  const res = await getLineChartOfDevice(pramsData)
  if (res.code === 200) {
    const { rows } = res
    hasData.value = rows.length
    const label = [""]
    const value = [0]
    rows.forEach((item) => {
      label.push(item.dataTime)
      value.push(item.total)
    })
    nextTick(() => {
      initChart({ label, value })
    })
    // const { rows } = res
    // const x = []
    // const d1 = []
    // const d2 = []
    // rows.typeOne.map((item) => {
    //   x.push(item.time)
    //   d1.push(item.difference)
    // })
    // rows.typeTwo.map((item) => {
    //   if (!x.length) {
    //     x.push(item.time)
    //   }
    //   d2.push(item.difference)
    // })
    // xData.value = x
    // data1.value = d1
    // data2.value = d2
    // setTimeout(() => {
    //   initChart(data1.value, data2.value, xData.value)
    // }, 200)
  } else {
    ElMessage.error(res.msg)
  }
}

watch(
  () => data,
  async () => {
    if (data.value && data.value.length) {
      resizeFn.value = await initChart(data1.value, data2.value, xData.value)
    }
  }
)
onActivated(() => {
  if (resizeFn.value) {
    resizeFn.value.resize()
  }
})
</script>

<style scoped lang="less">
@import "./index.less";
</style>
